import { Component } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';

// App组件
class App extends Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    // 评论列表
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  // 发表评论按钮
  //   1. 提交表单，阻止默认行为
  //   2. 获取评论信息，评论人和评论内容（受控组件）
  //   3. 发表评论，添加一条评论到列表中（更新状态）
  //   4. 发表成功后清空输入框，并且完善非空判断
  handlerSubmit = (e) => {
    e.preventDefault();
    // 非空判断
    if (!this.state.username || !this.state.content) {
      return alert('请输入内容~');
    }
    // this.state.list.unshift()
    // 🎯遵守React核心理念：状态不可变
    this.setState({
      list: [
        // 前添加一条数据
        {
          id: Date.now(),
          username: this.state.username,
          content: this.state.content,
        },
        // 展开原数据
        ...this.state.list,
      ],
      // 清空表单输入的内容
      username: '',
      content: '',
    });
  };

  // 受控组件更新 state
  handlerChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value.trim(),
    });
  };

  // 删除按钮
  handlerDelete = (id) => {
    // 🎯遵守React核心理念：状态不可变
    this.setState({
      list: this.state.list.filter((v) => v.id !== id),
    });
  };

  // 清空评论
  handlerClear = () => {
    // 直接清空数组
    this.setState({
      list: [],
    });
  };

  render() {
    return (
      <div className='app'>
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form>
          <input
            name='username'
            value={this.state.username}
            onChange={this.handlerChange}
            className='user'
            type='text'
            placeholder='请输入评论人'
          />
          <br />
          <textarea
            name='content'
            value={this.state.content}
            onChange={this.handlerChange}
            className='content'
            cols='30'
            rows='10'
            placeholder='请输入评论内容'
          />
          <br />
          <button onClick={this.handlerSubmit}>发表评论</button>
          <button onClick={this.handlerClear} type='button'>
            清空评论
          </button>
        </form>
        {/* 两条件渲染：三元表达式 */}
        {/* 补充：如果超过两个条件可以用函数封装，函数内部写 if/else 分支 */}
        {this.state.list.length ? (
          <ul>
            {this.state.list.map((item) => (
              <li key={item.id}>
                <h3>评论人: {item.username}</h3>
                <p>评论内容：{item.content}</p>
                <button onClick={() => this.handlerDelete(item.id)}>
                  删除
                </button>
              </li>
            ))}
          </ul>
        ) : (
          <div>沙发，空空如也~</div>
        )}
      </div>
    );
  }
}

// 创建根挂载点
const root = createRoot(document.getElementById('root'));
// 渲染根组件
root.render(<App />);
